<template>
    <div id="activity-manager" class="tab-page-container" display="flex">
        <a-tabs>
            <template #leftExtra>
                <div class="page-title-area">
                    社团管理
                </div>
            </template>
        </a-tabs>

        <div class="page-pane">
            <div style="font-size: 24px; font-weight: bold; padding-bottom: 8px;" class="title-box">
                {{ viewModel.Name }}
            </div>
            <div style="display: flex; margin-bottom: 16px; padding-left: 16px; margin-bottom: 8px;">
                <div style="font-size: 14px;">成员人数：{{ viewModel.Members }}人</div>
                <div style="padding-left: 24px;">指导老师：{{ viewModel.GuideTeacher }}</div>
                <div style="padding-left: 24px;">挂靠单位：{{ viewModel.ParentName }}</div>
            </div>
            <a-tabs v-model:activeKey="activeKey" style="margin: 16px;">
                <a-tab-pane key="basic-info" tab="基本信息">

                    <div class="edit-control-bar">
                        <a-button 
                            v-if="!isEditing" 
                            type="primary" 
                            @click="enterEditMode"
                        >
                            <template #icon><EditOutlined /></template>
                            编辑基本信息
                        </a-button>
                        <div v-else class="edit-actions">
                            <a-button @click="cancelEdit">
                                <template #icon><CloseOutlined /></template>
                                取消
                            </a-button>
                            <a-button 
                                type="primary" 
                                @click="saveChanges"
                                style="margin-left: 12px"
                            >
                                <template #icon><SaveOutlined /></template>
                                保存修改
                            </a-button>
                        </div>
                    </div>
                    <div class="basic-info-container">
                        <!-- 左右分栏布局 -->
                        <div class="info-columns">
                            <!-- 左侧栏 (2/3宽度) -->
                            <div class="left-column">
                                <a-form layout="vertical">
                                    <a-form-item label="梦部落名称">
                                        <a-input placeholder="请输入名称" />
                                    </a-form-item>
                                    <a-row :gutter="16">
                                        <a-col :span="8">
                                            <a-form-item label="社团类型">
                                                <a-select placeholder="请选择社团类型">
                                                    <a-select-option value="academic">学术类</a-select-option>
                                                    <a-select-option value="art">艺术类</a-select-option>
                                                    <a-select-option value="sports">体育类</a-select-option>
                                                </a-select>
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="8">
                                            <a-form-item label="成立时间">
                                                <a-date-picker style="width: 100%" />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="8">
                                            <a-form-item label="所属校区">
                                                <a-select placeholder="请选择校区">
                                                    <a-select-option value="north">北校区</a-select-option>
                                                    <a-select-option value="south">南校区</a-select-option>
                                                    <a-select-option value="east">东校区</a-select-option>
                                                </a-select>
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                    <a-form-item label="社团简介">
                                        <a-textarea placeholder="请输入社团简介" :rows="4" />
                                    </a-form-item>
                                    <a-row :gutter="16">
                                        <a-col :span="8">
                                            <a-form-item label="是否有完整章程">
                                                <a-select 
                                                    v-model:value="hasConstitution" 
                                                    @change="handleConstitutionChange"
                                                >
                                                    <a-select-option value="yes">是</a-select-option>
                                                    <a-select-option value="no">否</a-select-option>
                                                </a-select>
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="16">
                                            <a-form-item label="章程内容">
                                                <a-textarea 
                                                    placeholder="请输入章程内容" 
                                                    :rows="2" 
                                                    v-model:value="constitutionText"
                                                    :disabled="hasConstitution === 'yes'"
                                                />
                                            </a-form-item>
                                        </a-col>
                                    </a-row>

                                    <a-row :gutter="16">
                                        <a-col :span="8">
                                            <a-form-item label="功能型团支部建立">
                                                <a-select 
                                                    v-model:value="branchStatus" 
                                                    @change="handleBranchChange"
                                                >
                                                    <a-select-option value="established">已建立</a-select-option>
                                                    <a-select-option value="not_established">未建立</a-select-option>
                                                </a-select>
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="16">
                                            <a-form-item :label="branchLabel">
                                                <a-textarea 
                                                    :placeholder="branchPlaceholder" 
                                                    :rows="2" 
                                                    v-model:value="branchInfo"
                                                />
                                            </a-form-item>
                                        </a-col>
                                    </a-row>

                                    <!-- 历史活动展示 -->
                                    <div class="history-section">
                                        <div class="section-title">社团历史活动</div>
                                        <div class="activity-cards">
                                            <a-row :gutter="0">
                                                <a-col :span="8" v-for="(activity, index) in activities" :key="index">
                                                    <a-card 
                                                    :title="activity.title" 
                                                    :bordered="false"
                                                    class="activity-card"
                                                    >
                                                        <div class="card-content">
                                                            <p><calendar-outlined /> {{ activity.date }}</p>
                                                            <p><environment-outlined /> {{ activity.location }}</p>
                                                            <p><team-outlined /> 参与人数: {{ activity.participants }}</p>
                                                            <a-button type="link" @click="viewActivityDetail(activity.id)">
                                                                查看详情
                                                            </a-button>
                                                        </div>
                                                    </a-card>
                                                </a-col>
                                            </a-row>
                                        </div>
                                    </div>
                                </a-form>
                            </div>

                            <!-- 分割线 -->
                            <div class="divider"></div>

                            <!-- 右侧栏 (1/3宽度) -->
                            <div class="right-column">
                                
                                <div class="section-title">社团标识</div>
                                <div class="upload-area">
                                    <a-upload-dragger 
                                        name="logo" 
                                        :show-upload-list="false"
                                        :before-upload="beforeUploadLogo"
                                    >
                                        <p class="ant-upload-text">点击或拖拽上传社团Logo</p>
                                        <p class="ant-upload-hint">建议尺寸 200×200px</p>
                                        <img v-if="logoUrl" :src="logoUrl" class="logo-preview" />
                                    </a-upload-dragger>
                                </div>

                                <!-- 新增的三个文本框 -->
                                <div class="info-fields">
                                    <div class="text-field">
                                        <div class="section-title">社团官方宣传平台及账号</div>
                                        <a-textarea 
                                            v-model:value="socialMediaAccounts" 
                                            placeholder="例如：微信公众号「XX社团」、微博@XX社团" 
                                            :rows="2"
                                        />
                                    </div>
                                    
                                    <div class="text-field">
                                        <div class="section-title">荣获奖项</div>
                                        <a-textarea 
                                            v-model:value="awards" 
                                            placeholder="请输入社团获得的荣誉和奖项" 
                                            :rows="2"
                                        />
                                    </div>
                                    
                                    <div class="text-field">
                                        <div class="section-title">近三个学期警告记录</div>
                                        <a-textarea 
                                            v-model:value="warnings" 
                                            placeholder="若无警告记录请留空" 
                                            :rows="2"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a-tab-pane>

                <a-tab-pane key="mamber-manage" tab="成员管理" force-render>
                    <!-- 搜索栏 -->
                    <div class="search-bar">
                        <div class="search-area">
                            <!-- 第一行：搜索框和查询按钮 -->
                            <a-row :gutter="16" style="margin-bottom: 16px">
                                <a-col :span="7">
                                    <a-input-group compact>
                                        <span class="search-label">成员编号</span>
                                        <a-input v-model:value="searchForm.memberCode" allowClear style="width: calc(100% - 70px)" />
                                    </a-input-group>
                                </a-col>
                                <a-col :span="7">
                                    <a-input-group compact>
                                        <span class="search-label">成员名称</span>
                                        <a-input v-model:value="searchForm.memberName" style="width: calc(100% - 70px)" allowClear />
                                    </a-input-group>
                                </a-col>
                                <a-col :span="7">
                                    <a-input-group compact>
                                        <span class="search-label">所属学院</span>
                                        <a-select v-model:value="searchForm.college" style="width: calc(100% - 70px)" allowClear>
                                            <a-select-option value="">全部</a-select-option>
                                            <a-select-option value="computer">计算机学院</a-select-option>
                                            <a-select-option value="math">数学学院</a-select-option>
                                            <a-select-option value="physics">物理学院</a-select-option>
                                        </a-select>
                                    </a-input-group>
                                </a-col>
                                <a-col :span="3">
                                    <a-button type="primary" @click="onSearch">
                                        <search-outlined />
                                        查询
                                    </a-button>
                                </a-col>
                            </a-row>

                            <!-- 第二行：筛选器和重置按钮 -->
                            <a-row :gutter="16">
                                <a-col :span="7">
                                    <a-input-group compact>
                                        <span class="search-label">筛选方式</span>
                                        <a-select v-model:value="searchForm.filterType" style="width: calc(100% - 70px)" allowClear>
                                            <a-select-option value="">全部</a-select-option>
                                            <a-select-option value="department">按部门</a-select-option>
                                            <a-select-option value="role">按角色</a-select-option>
                                        </a-select>
                                    </a-input-group>
                                </a-col>
                                <a-col :span="7">
                                    <a-input-group compact>
                                        <span class="search-label">创建时间</span>
                                        <a-range-picker v-model:value="searchForm.createTime" style="width: calc(100% - 70px)" :placeholder="['开始', '结束']" />
                                    </a-input-group>
                                </a-col>
                                <a-col :span="7">
                                    <a-input-group compact>
                                        <span class="search-label">状态</span>
                                        <a-select v-model:value="searchForm.status" style="width: calc(100% - 70px)" allowClear>
                                            <a-select-option value="">全部</a-select-option>
                                            <a-select-option value="active">在校</a-select-option>
                                            <a-select-option value="inactive">离校</a-select-option>
                                        </a-select>
                                    </a-input-group>
                                </a-col>
                                <a-col :span="3">
                                    <a-button @click="resetSearch">
                                        <reload-outlined />
                                        重置
                                    </a-button>
                                </a-col>
                            </a-row>
                        </div>
                    </div>

                    <!-- 操作栏 -->
                    <div style="height: 49px; margin-top: 10px;">
                        <div class="operation-bar" style="padding-right: 80px;">
                            <div class="left-buttons">
                                <a-button type="primary" @click="handleCreate">
                                    <plus-outlined />
                                    新建
                                </a-button>
                                <a-button @click="handleBatchImport">
                                    <upload-outlined />
                                    批量导入
                                </a-button>
                                <a-button :disabled="!selectedRowKeys.length" @click="handleBatchDelete">
                                    <delete-outlined />
                                    批量删除
                                </a-button>
                            </div>
                            <div class="right-buttons">
                                <a-button @click="handleDownload">
                                    <download-outlined />
                                    下载
                                </a-button>
                            </div>
                        </div>
                    </div>

                    <!-- 成员列表 -->
                    <a-table 
                        :columns="columns" 
                        :data-source="data"
                        :scroll="{ x: 1000 }"
                        :row-selection="{ 
                            selectedRowKeys: selectedRowKeys,
                            onChange: keys => selectedRowKeys = keys 
                        }"
                    >
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.key === 'operation'">
                                <a-space>
                                    <a-button type="link" @click="handleEdit(record)">
                                        <template #icon><EditOutlined /></template>
                                        编辑
                                    </a-button>
                                    <a-divider type="vertical" />
                                    <a-button type="link" @click="handleDetail(record)">
                                        <template #icon><EyeOutlined /></template>
                                        查看
                                    </a-button>
                                    <a-divider type="vertical" />
                                    <a-button type="link" danger @click="handleDelete(record)">
                                        <template #icon><DeleteOutlined /></template>
                                        删除
                                    </a-button>
                                </a-space>
                            </template>
                        </template>
                    </a-table>
                </a-tab-pane>
                <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script setup>
import axios from '@/axios'
import { ref, reactive, computed, onMounted } from 'vue'
import { message, Modal } from 'ant-design-vue'
import app from '@/app'
import { useRoute } from 'vue-router'

const activeKey = ref('basic-info');
// app.toPage("/manage/activity/detail")
function toPage() {
    app.toPage("/manage/activity/detail")
}
let depart = {};

// BANNER条的代码
// 显示到界面上的ViewModel
const viewModel = reactive({
    Name: "某社团",
    Members: 10,
    ParentName: "某单位",
    GuideTeacher: "某老师",
});

// 获取社团数据
const route = useRoute();
const departId = route.query.departId; // 'baccad40-2230-c81a-003a-692890ae7f00'
async function getDepartById (departId) {
    var msg = await axios.post("/api/depart/GetDepart", {
        id: departId
    });

    return msg.data;
}

onMounted(async () => {
    depart = await getDepartById(departId);
    viewModel.Name = depart.Name;
});
// BANNER条的代码 结束

// 基本信息的代码
const basicInfoViewModel = reactive({
    Name: "",
});
onMounted(async () => {
    basicInfoViewModel.Name = depart.Name;
});
// 编辑状态控制
const isEditing = ref(false);
const formRef = ref(); // 如果使用表单需要获取ref

// 进入编辑模式
const enterEditMode = () => {
  isEditing.value = true;
};

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false;
  // 这里可以添加表单重置逻辑
};

// 保存修改
const saveChanges = async () => {
  try {
    // 如果有表单验证
    if (formRef.value) {
      await formRef.value.validateFields();
    }
    
    // 保存逻辑（API调用等）
    message.success('保存成功');
    isEditing.value = false;
  } catch (error) {
    message.error('保存失败：' + error.message);
  }
};


// 章程相关状态
const hasConstitution = ref('no');
const constitutionText = ref('');

// 处理章程选择变化
const handleConstitutionChange = (value) => {
  if (value === 'yes') {
    constitutionText.value = '已有完整章程文件';
  } else {
    constitutionText.value = ''; // 选择"否"时清空文本框
  }
  // 触发重新验证
  formRef.value.validateFields(['constitutionText']);
};


// 团支部相关状态
const branchStatus = ref('not_established');
const branchInfo = ref('');

// 计算属性动态改变标签和提示
const branchLabel = computed(() => 
  branchStatus.value === 'established' ? '团支部信息' : '未建立原因'
);

const branchPlaceholder = computed(() =>
  branchStatus.value === 'established' 
    ? '请输入功能型团支部详细信息' 
    : '请说明未建立功能型团支部的原因'
);

// 处理团支部状态变化
const handleBranchChange = (value) => {
  branchInfo.value = ''; // 状态变化时清空原有内容
  // 触发重新验证
  formRef.value.validateFields(['branchInfo']);
};

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value.validateFields();
    message.success('表单验证通过，提交成功');
    console.log('提交数据:', formState);
    // 这里添加实际提交逻辑
  } catch (error) {
    message.error('请检查表单填写是否完整');
    console.log('验证错误:', error);
  }
};

// 历史活动数据
const activities = ref([
  {
    id: 1,
    title: '春季招新活动',
    date: '2023-03-15',
    location: '学校广场',
    participants: 120,
    description: '年度招新活动，吸引了大量新生加入'
  },
  {
    id: 2,
    title: '编程马拉松',
    date: '2023-05-20',
    location: '计算机学院实验室',
    participants: 45,
    description: '24小时编程挑战赛，评选出优秀作品'
  },
  {
    id: 3,
    title: '学术讲座',
    date: '2023-09-10',
    location: '学术报告厅',
    participants: 80,
    description: '邀请业界专家分享最新技术趋势'
  }
]);

// 查看活动详情
const viewActivityDetail = (id) => {
  const activity = activities.value.find(item => item.id === id);
  Modal.info({
    title: activity.title,
    content: `
      <p><b>日期：</b>${activity.date}</p>
      <p><b>地点：</b>${activity.location}</p>
      <p><b>参与人数：</b>${activity.participants}</p>
      <p><b>活动描述：</b>${activity.description}</p>
    `,
    width: 600,
  });
};


// Logo上传相关
const logoUrl = ref('');
const beforeUploadLogo = file => {
  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    message.error('只能上传图片文件');
    return false;
  }
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    logoUrl.value = reader.result;
  };
  return false; // 手动处理不上传
};

// 三个文本框的数据绑定
const socialMediaAccounts = ref('微信公众号「科创社」\nB站账号：XX大学科创社');
const awards = ref('2023年校级优秀社团\n2022年科技创新大赛金奖');
const warnings = ref('2023秋季学期：未按时提交活动总结');

const columns = [
    {
        title: '成员编号',
        width: 90,
        dataIndex: 'memberCode',
        key: 'memberCode',
        fixed: 'left',
    },
    {
        title: '成员姓名',
        width: 80,
        dataIndex: 'memberName',
        key: 'memberName',
        fixed: 'left',
    },
    {
        title: '性别',
        dataIndex: 'gender',
        key: 'gender',
        width: 60,
    },
    {
        title: '所属学院',
        dataIndex: 'college',
        key: 'college',
        width: 120,
    },
    {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone',
        width: 120,
    },
    {
        title: '入社时间',
        dataIndex: 'joinTime',
        key: 'joinTime',
        width: 100,
    },
    {
        title: '职位',
        dataIndex: 'position',
        key: 'position',
        width: 90,
    },
    {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        width: 180,
    },
];

// 模拟数据结构
const data = [
    {
        key: '1',
        memberCode: 'M001',
        memberName: '张三',
        gender: '男',
        college: '计算机学院',
        phone: '13800138000',
        joinTime: '2023-09-01',
        position: '社长'
    },
    {
        key: '2',
        memberCode: 'M002',
        memberName: '李四',
        gender: '女',
        college: '数学学院',
        phone: '13800138001',
        joinTime: '2023-09-02',
        position: '副社长'
    },
    // 更多数据...
];


// 搜索表单数据
const searchForm = reactive({
  memberCode: '',
  memberName: '',
  college: '',
  filterType: '',
  createTime: [],
  status: '',
})

// 表格选择相关
const selectedRowKeys = ref([])

// 搜索与重置
function onSearch() {
  message.success('执行查询，条件：' + JSON.stringify(searchForm))
}
function resetSearch() {
  searchForm.memberCode = ''
  searchForm.memberName = ''
  searchForm.college = ''
  searchForm.filterType = ''
  searchForm.createTime = []
  searchForm.status = ''
  onSearch()
}

// 操作栏相关
function handleCreate() {
  message.info('新建')
}
function handleBatchImport() {
  message.info('批量导入')
}
function handleBatchDelete() {
  if (!selectedRowKeys.value.length) return
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除选中的 ${selectedRowKeys.value.length} 条记录吗？`,
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      message.success(`已删除 ${selectedRowKeys.value.length} 条记录`)
      selectedRowKeys.value = []
    }
  })
}
function handleDownload() {
  message.info('下载')
}

// 添加操作处理函数
const handleEdit = (record) => {
    message.info(`编辑成员：${record.memberName}`);
    // TODO: 实现编辑逻辑
};

const handleDetail = (record) => {
    message.info(`查看成员：${record.memberName}`);
    // TODO: 实现查看详情逻辑
};

const handleDelete = (record) => {
    Modal.confirm({
        title: '确认删除',
        content: `确定要删除成员 ${record.memberName} 吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
            message.success(`已删除成员：${record.memberName}`);
            // TODO: 实现删除逻辑
        }
    });
};

</script>

<style lang="less" scoped>

/* 新增编辑控制栏样式 */
.edit-control-bar {
  padding: 0px 0px 18px;
}


/* 使内容区可编辑 */
.page-pane {
    /* 输入框/选择器/日期选择器的编辑状态控制 */
    :deep(.ant-input),
    :deep(.ant-input-number),
    :deep(.ant-select-selector),
    :deep(.ant-picker) {
        pointer-events: v-bind("isEditing ? 'auto' : 'none'"); // 编辑时可交互
        background-color: v-bind("isEditing ? '#fff' : '#fafafa'"); // 编辑时白色背景
    }

    /* 上传组件的编辑状态控制 */
    :deep(.ant-upload) {
        pointer-events: v-bind("isEditing ? 'auto' : 'none'");
        background-color: v-bind("isEditing ? '#fff' : '#fafafa'");
        border-color: v-bind("isEditing ? '#d9d9d9' : 'transparent'");
    }

    /* 拖拽上传区域特殊样式 */
    :deep(.ant-upload.ant-upload-drag) {
        background: v-bind("isEditing ? '#fafafa' : '#fff'");
    }
}

/* ==================== 主容器样式 ==================== */
#activity-manager {
    .page-pane {
        padding: 0px;
    }

    .title-box {
        margin: 16px 16px 0px 16px;
    }

    /* 搜索栏样式 */
    .search-bar {
        height: 96px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        padding-left: 0px;
    }

    /* 搜索标签样式 */
    .search-label {
        display: inline-block;
        width: 70px;
        height: 32px;
        line-height: 32px;

        border: 1px solid #d9d9d9;
        border-right: none;
        border-radius: 6px 0 0 6px;
        text-align: center;
        color: rgba(0, 0, 0, 0.85);
        margin-right: -1px;
    }

    /* 操作栏样式 */
    .operation-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2px 24px;
        background: #fff;
        border-radius: 2px;
        margin: 4px 0 16px 0;
        padding-left: 0px;
    }
    .left-buttons,
    .right-buttons {
        display: flex;
        gap: 8px;
    }
    
    /* ==================== 信息分栏布局 ==================== */
    .info-columns {
        display: flex;
        gap: 20px; // 两栏间距20px
        min-height: 500px;
    }

    .left-column {
        flex: 2; // 2/3宽度
        padding: 0px;
        background: #fff;
        border-radius: 4px;
    }

    .right-column {
        flex: 1; // 1/3宽度
        padding: 16px;
        background: #fff;
        border-radius: 4px;
    }

    .divider {
        width: 1px;
        background-color: #e8e8e8; // 灰色分割线
    }

    .section-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        color: rgba(0, 0, 0, 0.85);
    }

    
    .stats-item {
        margin-bottom: 24px;
        .stats-label {
            color: rgba(0, 0, 0, 0.45);
            font-size: 14px;
            margin-bottom: 4px;
        }
        .stats-value {
            font-size: 18px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
        }
    }

    .upload-area {
        margin-top: 0px;
        :deep(.ant-upload.ant-upload-drag) {
            background: #fafafa;
        }
    }

    .constitution-disabled {
        :deep(.ant-input) {
            background-color: #f5f5f5;
            color: rgba(0, 0, 0, 0.45);
            cursor: not-allowed;
        }
    }

    .branch-info-text {
        white-space: pre-line; /* 保留换行符格式 */
    }

    .history-section {
        margin-top: 0px;
        padding-top: 16px;
        border-top: 1px dashed #e8e8e8;
    }

    .activity-cards {
        margin-top: 0px;
    }

    .activity-card {
        margin-bottom: 16px;
        transition: all 0.3s;
        height: 90%;
        
        &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transform: translateY(-4px);
        }
    }

    .card-content {
        p {
            margin-top: 0px;
            margin-bottom: 8px;
            color: rgba(0, 0, 0, 0.65);
            
            .anticon {
            margin-right: 8px;
            color: @primary-color;
            }
        }
    }

    /* 响应式调整 */
    /* 中等屏幕：2列 */
    @media (max-width: 992px) {
        .activity-cards .ant-col {
            flex: 0 0 50% !important;
            max-width: 50% !important;
        }
    }

    /* 小屏幕：1列 */
    @media (max-width: 768px) {
        .activity-cards .ant-col {
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }
    }


    .right-column {
        .upload-area {
            margin-bottom: 24px;
            
            .logo-preview {
            max-width: 100%;
            max-height: 150px;
            margin-top: 10px;
            display: block;
            }

            .upload-text {
                margin: 0 0 4px 0;
                color: rgba(0, 0, 0, 0.85);
            }
            .upload-hint {
                margin: 0;
                color: rgba(0, 0, 0, 0.45);
                font-size: 12px;
            }
        }
        
        .info-fields {
            .text-field {
                margin-bottom: 24px; /* 默认间距 */

                /* 专门针对"荣获奖项"增加上方间距 */
                &:nth-child(2) {  /* 第二个文本框 */
                    margin-top: 40px; /* 特别加大上方间距 */
                }

                .section-title {
                    font-size: 20px;
                    font-weight: 600;
                    margin-bottom: 12px; /* 标题与输入框间距 */
                    color: rgba(0, 0, 0, 0.85);
                }
            }
        }
    }
}
</style>